<template>
  <div class="search-popup">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="placeVal"
        @search="onSearch"
        @cancel="onCancel"
        @input="oninput"
      />
    </form>

    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @fatherfn='fatherfn'
      @fatherfn1='fatherfn1'
    />
    <SearchTipsList v-else-if="blockShow == 2" :hotdata="hotdata"  @fcell='fcell'/>
    <SearchProductList v-else-if="blockShow == 3" :produ='produ' :filterCategory='filterCategory' @categoryChange='categoryChange'  @priceChange='priceChange'/>
      
    <!-- 占位符 -->
  <router-view />
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import HistoryHot from "@/components/search/HistoryHot";
import SearchTipsList from "@/components/search/SearchTipsList";
import SearchProductList from "@/components/search/SearchProductList";
import { GetHisData, GetSearchData, GetgoodData } from "@/request/api";
export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
  data() {
    return {
      value: "",
      placeVal: "",
      blockShow: 1,
      historyKeywordList: [],
      hotKeywordList: [],
      hotdata: [],
      produ: [],
      filterCategory:[],
      order:'desc',
      categoryId:'0',
      sort:'id',
      times:null
    };
  },
  methods: {
    fatherfn(val){
   this.onSearch(val)
    },
    fatherfn1(val){
    this.onSearch(val)
    },
    fcell(val){
     this.onSearch(val)
    },
    
    categoryChange(id){
   this.categoryId=id
   this.onSearch(this.value)
    },
    priceChange(value){
      this.sort='price',
      this.order=value
     console.log(value);
      this.onSearch(this.value)
    },

    oninput(value) {
      if( this.times){
        clearTimeout(this.times)
      }
     this.times= setTimeout(()=>{
         this.blockShow = 2;
      GetSearchData({
        keyword: value,
      }).then((res) => {
        if (res.errno == 0) {
          console.log(res);
          this.hotdata = res.data;
        }
      });
      },500)
     
    },
    ...mapMutations({
      chaninShowShadow: "inShowShadow/chaninShowShadow",
    }),
    onSearch(value) {
      this.blockShow = 3;
      GetgoodData({
        keyword: value,
        order:this.order,
        sort:this.sort,
        categoryId:this.categoryId
      }).then((res) => {
        console.log(res.data);
        let{data,filterCategory}=res.data
        this.produ =data;
    let newArr=filterCategory.map(item=>{
    // { text: '全部商品', value: 0 },
     return {value:item.id, text:item.name, checked: item.checked}
     })
        this.filterCategory=newArr
      });
    },
    onCancel() {
      this.$router.go(-1);
      this.chaninShowShadow(false);
    },
  },
  created() {
    GetHisData().then((res) => {
      if (res.errno == 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.placeVal = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
        console.log(res.data);
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;

  background-color: #efefef;
}
</style>